.tr_default {
  width: 100%;
  height: 100%;
  padding: 14% 0;
  overflow: hidden;
  &_desc {
    color: var(--font-a60);
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    &.dark,
    &.gre {
      color: var(--font-white);
    }
  }
}

.tr_default_img {
  width: 100%;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  &.empty {
    background-image: url('https://10.4.6.209:8084/typeface/image/empty.png');
    &.dark,
    &.gre {
      background-image: url('https://10.4.6.209:8084/typeface/image/empty_dark.png') !important;
    }
  }
  &.error {
    background-image: url('https://10.4.6.209:8084/typeface/image/error.png');
    &.dark,
    &.gre {
      background-image: url('https://10.4.6.209:8084/typeface/image/error_dark.png') !important;
    }
  }
  &.lock {
    background-image: url('https://10.4.6.209:8084/typeface/image/lock.png');
    &.dark,
    &.gre {
      background-image: url('https://10.4.6.209:8084/typeface/image/lock_dark.png') !important;
    }
  }
  &.emptysm {
    background-image: url('https://10.4.6.209:8084/typeface/image/emptysm.png');
    transform: translateX(8px);
    &.dark,
    &.gre {
      background-image: url('https://10.4.6.209:8084/typeface/image/emptysm_dark.png') !important;
    }
  }
}

html[data-type-color='dark'],
html[data-type-color='gre'] {
  .tr_default_img {
    &.empty {
      background-image: url('https://10.4.6.209:8084/typeface/image/empty_dark.png');
    }
    &.error {
      background-image: url('https://10.4.6.209:8084/typeface/image/error_dark.png');
    }
    &.lock {
      background-image: url('https://10.4.6.209:8084/typeface/image/lock_dark.png');
    }
    &.emptysm {
      background-image: url('https://10.4.6.209:8084/typeface/image/emptysm_dark.png');
    }
  }
}
